<template>
  <div v-loading="loading">
    <div class="demo-input-suffix gl_searchBox">
      <!-- table的选择条件 -->
      <el-row :gutter="20">
        <el-col :md="6" :lg="4">
          <p>按性别选择</p>
          <el-select v-model="PointListQO.GenderCode" size="mini" placeholder="请选择" @change="findTabelDataList()">
            <el-option label="全部" value="" />
            <el-option label="男" value="M" />
            <el-option label="女" value="W" />
          </el-select>
        </el-col>
        <!-- <el-col :md="6" :lg="4">
          <p>按项目选择</p>
          <el-select v-model="PointListQO.CategoryId" size="mini" placeholder="请选择" @change="findTabelDataList()">
            <el-option label="全部" value="" />
            <el-option v-for="(data, index) in eventType" :key="index" :label="data.name" :value="data.id" />
          </el-select>
        </el-col> -->
        <el-col :md="6" :lg="4">
          <p>姓名/机构名</p>
          <el-input v-model="PointListQO.Keyword" placeholder="请输入" size="mini" clearable @change="findTabelDataList()" />
        </el-col>
        <el-col :md="8" :lg="6">
          <el-button type="primary" size="mini" @click="findTabelDataList()">查询</el-button>
          <el-button :loading="downloadTpLoading" style="margin-top: 27px" type="warning" size="mini" @click="downloadPDF()">导出积分表</el-button>
        </el-col>
      </el-row>
    </div>
    <!-- tabel表格 -->
    <div>
      <el-table class="gl_mt_15" :data="tableData" tooltip-effect="dark" style="width: 100%" size="mini">
        <el-table-column prop="finalRank" label="排名" width="50" />
        <el-table-column prop="name" label="姓名" :min-width="150">
          <template slot-scope="{ row }">
            <PersonalImage :imgurl="row.photoUrl" :imgheight="'50px'" />
            <!-- <div class="gl_dis_ib gl_middle">
              <img :src="getStaticFileUrl(row.photoUrl)" class="person_img" @error="errorPhoto">
            </div> -->
            <div class="gl_dis_ib gl_middle gl_ml_10">
              {{ row.name }}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="gender" label="性别" :width="50" />
        <el-table-column prop="organization" label="所属机构" :width="180">
          <template slot-scope="{ row }">
            <el-popover placement="bottom-start" width="200" trigger="hover" :content="row.organization">
              <div slot="reference" class="team_name">{{ row.organization }}</div>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column label="金牌">
          <template slot-scope="{ row }">
            <span>{{ row._subRankList._1 && row._subRankList._1.subRankCount }}</span>
          </template>
        </el-table-column>
        <el-table-column label="银牌">
          <template slot-scope="{ row }">
            <span>{{ row._subRankList._2 && row._subRankList._2.subRankCount }}</span>
          </template>
        </el-table-column>
        <el-table-column label="铜牌">
          <template slot-scope="{ row }">
            <span>{{ row._subRankList._3 && row._subRankList._3.subRankCount }}</span>
          </template>
        </el-table-column>
        <el-table-column label="第四名">
          <template slot-scope="{ row }">
            <span>{{ row._subRankList._4 && row._subRankList._4.subRankCount }}</span>
          </template>
        </el-table-column>
        <el-table-column label="第五名">
          <template slot-scope="{ row }">
            <span>{{ row._subRankList._5 && row._subRankList._5.subRankCount }}</span>
          </template>
        </el-table-column>
        <el-table-column label="第六名">
          <template slot-scope="{ row }">
            <span>{{ row._subRankList._6 && row._subRankList._6.subRankCount }}</span>
          </template>
        </el-table-column>
        <el-table-column label="第七名">
          <template slot-scope="{ row }">
            <span>{{ row._subRankList._7 && row._subRankList._7.subRankCount }}</span>
          </template>
        </el-table-column>
        <el-table-column label="第八名">
          <template slot-scope="{ row }">
            <span>{{ row._subRankList._8 && row._subRankList._8.subRankCount }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="winPercent" label="胜率">
          <template slot-scope="{ row }">
            <span>{{ (row.winPercent * 100).toFixed(2) }}%</span>
          </template>
        </el-table-column>
        <el-table-column prop="finalPoints" label="成绩总分" />
      </el-table>
    </div>
    <el-row class="gl_pt_20" style="text-align: center;">
      <el-pagination
        :current-page="PointListQO.Page"
        :page-size="PointListQO.MaxResultCount"
        :total="totalPage"
        layout="total,sizes,prev,pager,next,jumper"
        :page-sizes="[10, 20, 50, 100]"
        @size-change="sizeChange"
        @current-change="pageIndexChange"
      />
    </el-row>
  </div>
</template>
<script>
import { api_GET_DownLoadFileAddHeader } from '@/extend/api/file';
import { errorText } from '@/lib';
import defaultPersonImg from '@/assets/images/face_default.png';
import PersonalImage from '@/components/PersonalImage/index';
import { Api_GET_EventsManagementEventResultUnifiedPointRankListQO } from '@/lib/form/game/swaggerForm';
import {
  api_GET_EventsManagementCategory,
  api_GET_EventsManagementEventResultUnifiedPointRankList
} from '@/extend/api/gameswaggerApi/app.js';

export default {
  name: 'CoachRank',
  components: {
    PersonalImage
  },
  props: {
    pointTypeCode: {
      required: true,
      type: String,
      default: ''
    },
    refresh: {
      required: true,
      type: String,
      default: ''
    }
  },
  data() {
    return {
      PointListQO: new Api_GET_EventsManagementEventResultUnifiedPointRankListQO(),
      loading: false,
      defaultPersonImg: defaultPersonImg,
      downloadTpLoading: false,
      totalPage: 0, // 总条目数
      tableData: [], // 表格中的数据
      eventType: []
    };
  },
  watch: {
    pointTypeCode: {
      handler (newVal, oldVal) {
        if (newVal && newVal !== oldVal) {
          this.findTabelDataList();
        }
      }
    },
    refresh: {
      handler (newVal) {
        if (newVal === 'coachRank') {
          this.findTabelDataList();
        }
      }
    }
  },
  created() {
    this.gameId = this.$route.params.id;
    this.getCategory();
    this.PointListQO.MaxResultCount = 50;
    if (this.pointTypeCode) {
      this.findTabelDataList();
    }
  },
  methods: {
    // 获取项目列表
    getCategory() {
      var that = this;
      this.loading = true;
      const params = {
        CompetitionId: this.gameId
      };
      api_GET_EventsManagementCategory(params).then(res => {
        that.eventType = res.items;
        that.loading = false;
      }).catch(() => {
        that.loading = false;
        that.$message({ type: 'error', message: '获取项目列表失败！' });
      });
    },
    // 查询数据
    findTabelDataList(page) {
      this.loading = true;
      this.PointListQO.Page = page || 1;
      this.PointListQO.SkipCount = (this.PointListQO.Page - 1) * this.PointListQO.MaxResultCount;
      this.PointListQO.CompetitionId = this.gameId;
      this.PointListQO.PointTypeCode = this.pointTypeCode || '';
      this.PointListQO.Type = 'Coach';
      this.PointListQO.IncludeFinal = true;
      this.PointListQO.IncludeSubRank = true;
      api_GET_EventsManagementEventResultUnifiedPointRankList(this.PointListQO).then(res => {
        var returnData = res.items;
        // 处理返回的数据
        this.tableData = this.hanldReault(returnData);
        console.log(this.tableData);
        this.totalPage = res.totalCount;
        this.loading = false;
      }).catch(error => {
        this.loading = false;
        if (error.error && error.error.code === '当前赛事尚未设置比赛配置信息，请先设置配置信息') {
          this.$message({ type: 'warning', message: error.error.code });
        } else {
          this.$message({ type: 'error', message: error.error && error.error.message || '获取教练积分排名失败！' });
        }
      });
    },
    // 处理成绩
    hanldReault(eventResult) {
      const returnEventResult = [];
      for (let i = 0; i < eventResult.length; i++) {
        const item = eventResult[i];
        item._subRankList = this.hanldRank(item.subRankList);
        returnEventResult.push(item);
      }
      return returnEventResult;
    },
    // 处理排名
    hanldRank(subRankList) {
      const returnRankInfo = {};
      for (let i = 0; i < subRankList.length; i++) {
        const item = subRankList[i];
        returnRankInfo['_' + item.subRank] = item;
      }
      return returnRankInfo;
    },
    // 获取静态图片地址
    getStaticFileUrl(relativeUrl) {
      if (!relativeUrl) return '';
      return WEB_CONFIG.VUE_APP_STATIC_FILE_RUL + relativeUrl;
    },
    errorPhoto() {
      const img = event.srcElement;
      img.src = this.defaultPersonImg;
    },
    downloadPDF() {
      var that = this;
      this.downloadTpLoading = true;
      let CategoryId = '';
      let CategoryIds = '';
      if (this.PointListQO.CategoryId !== '') {
        CategoryId = this.PointListQO.CategoryId;
      } else {
        for (let i = 0; i < this.eventType.length; i++) {
          const item = this.eventType[i].id;
          CategoryIds = CategoryIds + item;
          if (i !== this.eventType.length - 1) {
            CategoryIds = CategoryIds + ',';
          }
        }
      }
      const tempUrl = `/api/app/events-management/report`;
      const fileName = '积分表' + '.pdf';
      api_GET_DownLoadFileAddHeader(tempUrl, fileName, { ReportName: 'MedalStanding', Format: 'PDF', CompetitionId: this.gameId, Type: 'Coach', PointTypeCode: this.pointTypeCode, CategoryId: CategoryId, CategoryIds: CategoryIds, Keyword: this.PointListQO.Keyword, GenderCode: this.PointListQO.GenderCode }).then(res => {
        that.downloadTpLoading = false;
      }).catch(error => {
        that.downloadTpLoading = false;
        errorText(error).then(function(text) {
          that.$message({ type: 'error', message: text });
        });
      });
    },
    // 分页
    sizeChange: function(MaxResultCount) {
      this.PointListQO.MaxResultCount = MaxResultCount; // 每页显示条目数
      this.findTabelDataList();
    },
    pageIndexChange(currentPage) {
      this.findTabelDataList(currentPage);
    }
  }
};
</script>
<style scoped>
.person_img {
  max-width: 50px;
  max-height: 50px;
  display: block;
}
.team_name {
  /* display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2; */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
</style>
